<!--
  功能：
  作者：parker
  邮箱：geekpark@icloud.com
  微信：wzb10746
  时间：2023年08月21日 20:23:31
  版本：
  文件: src/pages/tabbar/my.vue
-->

<template>
	<view class="me">
		<view class="me-header">
		<view class="me-header-bg">
			<u-image width="100%" src="/static/images/bg-meHeader.jpg"/>
			<view class="me-header-bg-gradient" />
		</view>
		<view class="me-header-wrap">
			<view class="u-flex u-flex-between me-header-top">
				<i @click="onLeftMenuClick" class="ri-menu-fill ri-2x" :style="{ color: '#fff' }"></i>
				<i class="ri-share-box-line ri-2x" :style="{ color: '#fff' }"></i>
			</view>
			<view class="u-flex u-m-t-50">
				<u-avatar size="70" />
				<view class="u-m-l-20">
					<h2 class="u-m-b-10 me-name">name</h2>
					<view class="me-header-desc">
						<span class="u-m-r-5">小红书号: 820567584</span>
						<i class="ri-qr-code-line" :style="{color:'#fff'}"></i>
					</view>
					<view class="u-m-b-5 me-header-desc">
						<span>
							IP属地： 湖北
						</span>
						<i class="ri-information-line" :style="{ color: '#999' }"></i>
					</view>
				</view>
			</view>

			<view class="me-addProfile">
				点击这里，填写简介
			</view>
			<view class="me-sex">
				<view class="me-sex-item">
				<i class="ri-women-line" :style="{color:'#60afff'}"></i>
			    <span class=" me-sex-item-desc">30岁</span>
				</view>
			</view>

			<view class="u-flex  u-flex-between u-m-t-50 u-m-b-50 me-attention">
				<view class="u-flex">
					<view class="u-flex u-flex-column u-flex-middle u-m-r-30">
						<span class="me-attention-count">58</span>
						<span>关注</span>
					</view>
					<view class="u-flex u-flex-column u-flex-middle u-m-r-30">
						<span  class="me-attention-count">1</span>
						<span>粉丝</span>
					</view>
					<view class="u-flex u-flex-column u-flex-middle u-m-r-30">
						<span  class="me-attention-count">4</span>
						<span>获赞与收藏</span>
					</view>
				</view>

				<view class="u-flex u-flex-middle">
					<view class="me-editProfile u-m-r-25">
						编辑资料
					</view>
					<view class="me-editProfile">
						<i class="ri-settings-3-line ri-xl" :style="{color:'#fff'}"></i>
					</view>
				</view>
			</view>

			<!-- <view>
				<view>
					<i class="ri-add-fill ri-5x"></i>
				</view>
			</view> -->

			<view class="u-flex u-flex-between me-header-bottom">
				<view class="me-header-bottom-item">
					<view class="u-flex u-flex-y-center u-flex-y-center u-m-b-5">
						<i class="ri-shopping-cart-line ri-lg"></i>
						<span class="me-header-bottom-title u-m-l-5">购物车</span>
					</view>
					<p class="me-header-bottom-desc">4个商品</p>
				</view>
				<view class="me-header-bottom-item">
					<view class="u-flex u-flex-y-center u-m-b-5">
						<i class="ri-lightbulb-flash-line ri-lg"></i>
						<span class="me-header-bottom-title u-m-l-5">创作灵感</span>
					</view>
					<p class="me-header-bottom-desc">4个商品</p>
				</view>
				<view class="me-header-bottom-item">
					<view class="u-flex u-flex-y-center u-m-b-5">
						<i class="ri-history-line"></i>
						<span class="me-header-bottom-title u-m-l-5">浏览记录</span>
					</view>
					<p class="me-header-bottom-desc">4个商品</p>
				</view>
			</view>
		</view>
		</view>

		<view class="me-content">
			<view class="u-flex u-flex-center">
				<u-tabs 
				class="header-tabs"
				ref="uTab"
				:list="tabList"
				:current="meListTabIndex"
				lineColor="#FF2442"
				:activeStyle="{
					color: '#333',
					fontWeight: 'bold'
				}"
				:inactiveStyle="{
					color: '#8C8C8C'
				}"
				lineWidth="25"
				lineHeight="3"
				itemStyle="padding-left: 15px; padding-right: 15px; height: 34px;"
				@click="tabClick"
				@change="tabChange"
			></u-tabs>
			</view>

			<view>
				<ContentList :columnCount="tabList.length" ref="contentListRef" @updateIndex="onPageIndexChange">
					</ContentList>
			</view>
		</view>
	</view>

	<LeftMenu ref="leftMenuRef"/>

</template>

<script setup>
import { ref, getCurrentInstance, onBeforeMount, reactive, toRefs, computed, watch, defineComponent, defineAsyncComponent,  onMounted, unref, toRaw, watchEffect  } from 'vue'
import { onLoad } from '@dcloudio/uni-app'
import BScroll from 'better-scroll'
import { storeToRefs } from 'pinia'
import ContentItem from '@/components/items/contentItem.vue'
import LeftMenu from '@/components/popup/leftMenu.vue'
import ContentList from '@/components/list/swiperWrapY.vue'
import { MY_TAB_LIST } from '@/common/const'
import { useUserStore } from '@/pinia'

defineComponent({
  components: {
    LeftMenu,
	ContentList
  }
})
// const AsyncContentList = defineAsyncComponent(() =>
//   import('@/components/list/contentList.vue')
// )
const store = useUserStore()
const { count } = storeToRefs(store)
const leftMenuRef = ref(null)
const uTab = ref(null)
const contentListRef = ref(null)
const tabList = ref(MY_TAB_LIST)
const currenListIndex = ref(1)
let slide
// 作为 action 的 increment 可以直接解构
const { increment } = store

// 左侧菜单打开后回调
const leftMenuClickCb = (()=>{
	console.log('该函数将在左侧菜单弹层打开后500ms时执行')
})

// 左上角菜单按钮点击事件
const onLeftMenuClick = (()=>{
	leftMenuRef.value.open(leftMenuClickCb, 500)
})

// 头部tabs点击回调
const tabClick = (e) => {

}

// 头部tabs切换监听
const tabChange = (e) => {
	const { index } = e
	currenListIndex.value = index
	contentListRef.value.goToPage(index, 0)
	// setListTabIndex(index)
}

const onPageIndexChange = (index) => {
	console.log({ index })
	const item = MY_TAB_LIST[index]
	uTab.value.clickHandler(item, index)
}

onMounted(()=>{

})

</script>




<style lang="scss" scoped>
.me {
	color:#fff;
	font-size: $uni-font-size-sm;
	position: relative;

	&-header {
		background-color: #333;
		overflow: hidden;
		position: relative;
		&-wrap{
			position: relative;
			z-index: 10;
			padding: 60upx 30upx 70upx;
		}
		&-bg{
		position: absolute;
		z-index: 0;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;

		&-gradient{
			background-image:linear-gradient(1deg, #323232, #4d4d4d 40%, rgb(173 173 173 / 52%));
			width: 100%;
			height: 100%;
			top: 0;
			left: 0;
			position: absolute;
		}
	}
		&-bottom{
			&-item{
				width: 31.5%;
				background-color: #666;
				border-radius: 8upx;
				padding: 12upx 24upx;
				box-sizing: border-box;
			}
			&-desc{
			font-size: 12px;
			color: #999;
			transform: scale(0.9);
			transform-origin: 0 0;
			margin-left: 4upx;
		}
		}
	
	}

	&-content{
		background-color: #fff;
		border-radius: 20upx 20upx 0 0;
		position: relative;
		z-index: 20;
		margin-top: -20upx;

	}
	&-name{
		letter-spacing: 3px;
	}
	&-addProfile{
		font-size: 14px;
		color: #fff;
		padding: 30upx 0 20upx;
	}
	&-sex{
		&-item{
			background-color: rgba(255, 255, 255, 0.2);
			border-radius: 100px;
			padding: 4upx 18upx;
			display: inline-flex;
			align-items: center;
			font-size: 12px;
			&-desc{
				font-size: 12px;
				margin-left: 4upx;
				
			}
		}
	}
	&-attention{
		color:#999;
		font-size: 12px;
		&-count{
			color: #Fff;
			font-size: 14px;
		}
	}
	&-editProfile{
		background-color: rgba(255, 255, 255, 0.1);
		color: #fff;
		border-radius: 100px;
		padding: 8upx 28upx;
		border: 1upx solid #fff;
	}
}
</style>
